@extends('layouts.mobile_main')

@section('title', '今日')

@section('resources')
    @parent
    <link rel="stylesheet" type="text/css" href="{{env('CSS_DOMAIN')}}css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
        .happening_clock{margin-left: 0.6rem;font-size: 0.48rem;color: #9750C5;background: url({{env('IMAGE_DOMAIN')}}images/clock.png) 0 0.13rem no-repeat;background-size: 0.48rem;padding-left: 0.58rem;}
        .busy_name{display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;width: 6.5rem;}
        .search_max{width: 9.6rem;height: 0.7rem;margin: 0.25rem 0.6rem;border-radius: 0.35rem;color: #9955c6;background: #fff url({{env('IMAGE_DOMAIN')}}images/search_p.png) 3rem 0.12rem no-repeat;background-size: 0.48rem;}
        .nearby_busy{float: left;color: #964FC4;background: url({{env('IMAGE_DOMAIN')}}images/recommend.png) 0 0.1rem no-repeat;margin: 0.2rem 0 0.2rem 0.6rem;background-size: 0.48rem;padding-left: 0.58rem;padding-top: 0.05rem;}
        #download{position: fixed;bottom: 1.6rem;right: 0;width: 100%;height: 1.6rem;background: rgba(172,125,204,0.8);}
        #download .down_close{position: absolute;top: -0.6rem;left: 0;width: 0.75rem;}
        #download .down_logo{width: 1.2rem;float: left;margin-left: 0.6rem;margin-top: 0.2rem;}
        #download p{float: left;margin-left: 0.6rem;overflow: hidden;width: 3rem;}
        #download span{float: left;}
        #download .down_down img{width: 2.5rem;float: left;height: 1rem;}
        #goto_download{width: 7rem;height: 4.2rem;background-color: #fff;position: fixed;top: 50%;left: 50%;margin-left: -4.1rem;margin-top: -2.1rem;padding: 0 0.6rem;}
        #goto_download .download_text{margin-bottom: 1rem;margin-top: 0.7rem}
        #goto_download .close_download{padding: 0.3rem 0.4rem;border: 1px solid #ccc;color: #ccc;border-radius: 0.2rem;}
        #goto_download .go_download{padding: 0.3rem 0.4rem;background-color: #9955c6;color: #fff;border-radius: 0.2rem;}
        .pay_shop_out{width: 100%;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;display: none;z-index: 102;}
        .red_envelope{background: rgba(0,0,0,0.3);width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: none;}
        .red_envelope .red_packed{position: absolute;top: 4rem;left: 0.65rem;}
        .red_envelope .header{position: relative;}
        .red_envelope .header img{width: 9.5rem;float: left;}
        .red_envelope .footer img{width: 9.5rem;position: relative;}
        .red_envelope .red_content{width: 7.65rem;margin-left: 0.88rem;position: relative;background-color: #D84232;}
        .red_envelope ul{position: absolute;top: -2rem;left: 0.9rem;overflow: scroll;}
        .red_envelope ul li{width: 5.8rem;height: 1.8rem;position: relative;padding-bottom: 0.2rem;}
        .red_envelope ul li img{width: 5.8rem;position: absolute;top: 0;left: 0;}
        .red_envelope ul li .content{position: absolute;top: 0;left: 0;width: 5.8rem;height: 1.8rem;}
        .red_envelope ul li .content .content_left{overflow: hidden;width: 2.1rem;}
        .red_envelope ul li .content .content_right{overflow: hidden;width: 3.4rem;margin-left: 0.3rem;}
    </style>
@endsection

@section('content')
	<!-- 今日头部 -->
	<header class="oh fz_48 today">
		<a href="/mobile/position" class="fl location co_white">{{$cityname}}<img style="margin-left: 0.2rem;width: 0.4rem;" src="{{env('IMAGE_DOMAIN')}}/images/down.png?v={{env('IMAGE_VERSION')}}" alt=""></a>
		<span class="fl center">今日翻倍花</span>
        <a href="#" class="fr scan" style="margin-right: 0.6rem;">
            <img style="width: 0.48rem;" src="{{env('IMAGE_DOMAIN')}}images/scan_w.png?v={{env('IMAGE_VERSION')}}" alt="">
        </a>
		<a class="fr search" style="display: none;margin-right: 0.2rem;" href="/mobile/shop/search">
		<img style="width: 0.48rem;height: 0.48rem;" src="{{env('IMAGE_DOMAIN')}}images/search_w.png?v={{env('IMAGE_VERSION')}}" alt="">
		</a>
	</header>
	<!-- 搜索开始 -->
	<div class="search_outer">
		<a href="/mobile/shop/search"><input class="fl tc search_max fz_34" type="text" value="查找商家、分类"></a>
	</div>
	<!-- 搜索结束 -->
	<!-- 今日头部结束 -->

	<!-- banner轮播 -->
	<div class="banner_outer">
		<div class="banner_out">
			<ul class="banner_inner">
				@foreach($banner as $bannerList)
				<li>
				    @if($bannerList['type']== 'h5')
					    <a href="{{$bannerList['content']}}"><img src="{{env('IMAGE_DOMAIN')}}{{$bannerList['url']}}" alt=""></a>
					@elseif($bannerList['type']== 'shop')
					    <a href="/mobile/shop/get?shopid={{$bannerList['content']}}&cityid=1"><img src="{{env('IMAGE_DOMAIN')}}{{$bannerList['url']}}" alt=""></a>
					@else
					    <a href="#"><img src="{{env('IMAGE_DOMAIN')}}{{$bannerList['url']}}" alt=""></a>
					@endif
				</li>
				@endforeach
			</ul>
			<div class="banner_sign">
				<span class="select"></span>
			</div>
		</div>
	</div>
	<!-- banner轮播结束 -->

	<!-- 分类开始 -->
	<section class="classify fz_34">
        <ol class="oh classify_01">
            <li class="fl" style="margin-left: 0.6rem;">
                <a href="/mobile/today?classid=1&isfirstclass=1&cityid={{$cityid}}&classname=美食">
                    <img src="{{env('IMAGE_DOMAIN')}}images/food.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li class="fl" style="margin-left: 0.6rem;">
                <a href="/mobile/today?classid=7&isfirstclass=0&cityid={{$cityid}}&classname=甜点饮品">
                    <img src="{{env('IMAGE_DOMAIN')}}images/dessert.png" alt="">
                    <p>甜点饮品</p>
                </a>
            </li>
            <li class="fl" style="margin-left: 0.6rem;">
                <a href="/mobile/today?classid=2&isfirstclass=1&cityid={{$cityid}}&classname=休闲娱乐">
                    <img src="{{env('IMAGE_DOMAIN')}}images/recreation.png" alt="">
                    <p>休闲娱乐</p>
                </a>
            </li>
            <li class="fl" style="margin-left: 0.6rem;">
                <a href="/mobile/today?classid=3&isfirstclass=1&cityid={{$cityid}}&classname=生活服务">
                    <img src="{{env('IMAGE_DOMAIN')}}images/service.png" alt="">
                    <p>生活服务</p>
                </a>
            </li>
        </ol>
        <ol class="oh classify_02">
            <li class="fl" style="margin-left: 0.6rem;">
                <a href="/mobile/today?classid=9&isfirstclass=0&cityid={{$cityid}}&classname=KTV">
                    <img src="{{env('IMAGE_DOMAIN')}}images/ktv.png" alt="">
                    <p>KTV</p>
                </a>
            </li>
            <li class="fl" style="margin-left: 0.6rem;">
                <a href="/mobile/today?classid=4&isfirstclass=1&cityid={{$cityid}}&classname=酒店">
                    <img src="{{env('IMAGE_DOMAIN')}}images/hotel.png" alt="">
                    <p>酒店</p>
                </a>
            </li>
            <li class="fl" style="margin-left: 0.6rem;">
                <a href="/mobile/today?classid=20&isfirstclass=0&cityid={{$cityid}}&classname=服饰购物">
                    <img src="{{env('IMAGE_DOMAIN')}}images/shopping.png" alt="">
                    <p>服饰购物</p>
                </a>
            </li>
            <li class="fl" style="margin-left: 0.6rem;">
                <a href="/mobile/today?classid=0&isfirstclass=1&cityid={{$cityid}}&classname=全部">
                    <img src="{{env('IMAGE_DOMAIN')}}images/all.png" alt="">
                    <p>全部</p>
                </a>
            </li>
        </ol>
	</section>
	<!-- 分类结束 -->

	<!-- 九点正在发生开始 -->
	@if(!empty($occur))
	<section>
		<div class="oh happening">
			<span class="fl happening_clock"><span>21</span>点正在发生</span>
			<p class="fr happening_prompt" style="width: 4rem;height: 0.7rem;overflow-x: scroll;"><span class="fl" style="width: 14rem;overflow: hidden;"><span style="float:left;width: 7rem;">温馨提示：请提前致电商家联系预定！</span><span style="float:left;width: 7rem;">温馨提示：请提前致电商家联系预定！</span></span></p>
		</div>
		<p class="oh happening_pic">
		    @if(count($occur) == 2)
                @foreach($occur as $list)
                   @if(($list['id'] == 4) && ($list['isfirstclass'] == 1))
                    <a href="/mobile/night?classid={{$list['id']}}&isfirstclass={{$list['isfirstclass']}}&cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}">
                        <img src="{{env('IMAGE_DOMAIN')}}images/21_hotel.png" alt="">
                    </a>
                   @elseif(($list['id'] == 9) && ($list['isfirstclass'] == 0))
                    <a href="/mobile/night?classid={{$list['id']}}&isfirstclass={{$list['isfirstclass']}}&cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}">
                        <img src="{{env('IMAGE_DOMAIN')}}images/21_KTV.png" alt="">
                    </a>
                   @endif
                @endforeach
			@elseif(count($occur) == 1)
			    @foreach($occur as $list)
                    @if(($list['id'] == 4) && ($list['isfirstclass'] == 1))
                    <a href="/mobile/night?classid={{$list['id']}}&isfirstclass={{$list['isfirstclass']}}&cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}">
                        <img src="{{env('IMAGE_DOMAIN')}}images/hotel_long.png" alt="">
                    </a>
                    @elseif(($list['id'] == 9) && ($list['isfirstclass'] == 0))
                    <a href="/mobile/night?classid={{$list['id']}}&isfirstclass={{$list['isfirstclass']}}&cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}">
                        <img src="{{env('IMAGE_DOMAIN')}}images/ktv_long.png" alt="">
                    </a>
                    @endif
                @endforeach
			@endif
		</p>
	</section>
	@endif
	<!-- 九点正在发生结束 -->

	<!-- 附近商家开始 -->
	<section class="nearby">
		<span class="fz_44 nearby_busy">推荐商家</span>
		<ul class="nearby_all" id="thelist">
			@foreach($shoplists as $shoplist)
			    <li class="oh nearby_cen">
                    <a href="/mobile/shop/get?shopid={{$shoplist['shopid']}}&cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}">
                        <div class="fl nearby_busypic pr">
                            <p class="search_time fz_28 tc">今日翻倍花</p>
                            <img class="fl" src="{{env('IMAGE_DOMAIN')}}{{$shoplist['logo']}}" alt="">
                        </div>
                        <div class="fr nearby_busytext">
                            <div class="fz_44 oh">
                                <h2 class="fl fz_44 busy_name">{{$shoplist['name']}}</h2>
                                @if($shoplist['commentmark'] != 0)
                                {{--<em class="fr nearby_score">{{round($shoplist['commentmark'],1)}}分</em>--}}
                                @else
                                {{--<em class="fr nearby_score">新店入驻</em>--}}
                                @endif
                            </div>

                            <p class="fz_34 oh nearby_family">
                                <span class="fl">{{$shoplist['secondclassname']}}{{$shoplist['label']}}</span>
                                {{--<span class="fr">{{$shoplist['ordernumber']}}笔消费</span>--}}
                            </p>
                            <p class="fz_28 oh nearby_address">
                                <span class="fl">{{$shoplist['districtname'].$shoplist['businessareaname']}}</span>

                                @if(isset($shoplist['distance']))
                                <span class="fr"><&nbsp;{{$shoplist['distance']}} km</span>
                                @endif
                            </p>
                        </div>
                    </a>
                </li>
			@endforeach
		</ul>
	</section>
	<!-- 附近商家结束 -->
    <nav id="download">
        <img class="down_close" src="{{env('IMAGE_DOMAIN')}}images/index_close.png?v={{env('IMAGE_VERSION')}}" alt="">
        <img class="down_logo" src="{{env('IMAGE_DOMAIN')}}images/index_logo.png?v={{env('IMAGE_VERSION')}}" alt="">
        <p>
            <span class="fz_48 co_white" style="margin-top: 0.2rem;">翻贝网App</span>
            <span class="fz_40 co_white">翻贝网·翻倍花</span>
        </p>
        <a class="down_down" href="/mobile/app/download" style="float: right;margin-top: 0.3rem;margin-right: 0.6rem;"><img src="{{env('IMAGE_DOMAIN')}}images/index_download.png?v={{env('IMAGE_VERSION')}}" alt=""></a>
    </nav>
    <!-- 扫码付款 -->
    <nav class="pay_shop_out">
        <div id="goto_download">
            <p class="fz_48 tc download_text">该功能请下载翻贝网APP体验</p>
            <p>
                <span class="close_download fz_40 fl">下次再说</span>
                <span class="go_download fz_40 fr">前往下载app</span>
            </p>
        </div>
    </nav>
    <img id="totop" style="position:fixed;bottom: 3.8rem;right: 1rem;display:none;width: 1.1rem;height: 1.1rem;" src="{{env('IMAGE_DOMAIN')}}images/top.png?v={{env('IMAGE_VERSION')}}" alt="">
	<!--高德定位获取经纬度 start-->
    <div id='container'></div>
    <!--高德定位获取经纬度 end-->
	<input type="hidden" name="page" id="page" value="{{$page}}"/>
    <!-- 红包 -->
    <nav class="red_envelope">
        <div class="red_packed">
            <div class="header">
                <img src="{{env('IMAGE_DOMAIN')}}images/redhead.png?v={{env('IMAGE_VERSION')}}" alt="">
                <img class="red_packed_close" style="width: 0.8rem;position: absolute;top: -0.4rem;right: 0.48rem;" src="{{env('IMAGE_DOMAIN')}}images/red_close.png?v={{env('IMAGE_VERSION')}}" alt="">
                <div style="clear: both;"></div>
            </div>
            <div class="red_content">
                <ul>
                    <li class="red_content_money">
                        <img src="{{env('IMAGE_DOMAIN')}}images/red_w.png?v={{env('IMAGE_VERSION')}}" alt="">
                        <div class="content">
                            <p class="fl content_left">
                                <!-- <span class="co_orange fl" style="font-size: 0.9rem;margin-left: 0.5rem;margin-top: 0.5rem;">12.0</span> -->
                                <span class="co_orange fl" style="font-size: 0.7rem;margin-left: 0.3rem;margin-top: 0.2rem;width: 1.7rem;text-align: center;">12.0</span>
                                <span class="co_orange fl" style="font-size: 0.28rem;margin-left: 0.3rem;width: 1.7rem;text-align: center;">满100可用</span>
                            </p>
                            <p class="fr content_right">
                                <span class="fl" style="font-size: 0.28rem;width: 100%;text-align: center;margin-top: 0.4rem;">限南昌使用</span>
                                <span class="fl" style="font-size: 0.28rem;width: 100%;text-align: center;">有效期至 2017-02-30</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
                
            <p class="footer">
                <img src="{{env('IMAGE_DOMAIN')}}images/redfoot.png?v={{env('IMAGE_VERSION')}}" alt="">
            </p>
        </div>
    </nav>
    @include('layouts.mobile_footer')
@endsection

@section("scriptResources")
    @parent
    <script src="{{ env('JS_DOMAIN') }}js/banner.js?v={{env('JS_VERSION')}}"></script>
    <script src="{{ env('JS_DOMAIN') }}js/include.js?v={{env('JS_VERSION')}}"></script>
    <script>
        var image_domain = '{{env('IMAGE_DOMAIN')}}';
        var mylongitude = '{{$mylongitude}}';
        var mylatitude = '{{$mylatitude}}';
        window.onresize=function(){
            pagesp();
        }
        var timer=null;
        function auto(){//九点发生
            clearInterval(timer)
            var wxin=$(".happening_prompt span").width();
            var wxout=$(".happening_prompt").width();
            var scrolen=$(".happening_prompt").scrollLeft();
            timer=setInterval(function(){
                scrolen++;
                if(scrolen>(wxin-wxout)){
                    scrolen=wxin/2-wxout;
                }
                $(".happening_prompt").scrollLeft(scrolen);
            },20)
        }
        auto();
        //扫码付款
        $(".pay_shop_out").height($(window).height());
        $(".scan").click(function(){
            $(".pay_shop_out").show();
        });
        $(".close_download").click(function(){
            $(".pay_shop_out").hide();
        });
        $(".go_download").click(function(){
            window.open("/mobile/app/download","_blank");
            $(".pay_shop_out").hide();
        });
        //红包关闭
        $(".red_packed_close").click(function(){
            $(".red_envelope").hide();
        })
        $(function(){
            $(".down_close").click(function(){
                $("#download").hide();
                $("#totop").css({"bottom":"2.5rem"});
            })
            $(".banner_out").imgRoll();
            $(".banner_sign").css("margin-left",-$(".banner_sign").width()/2);
            if($(".happening_pic a").length==1){//九点发生一家显示
                $(".happening_pic a").css("width","9.6rem");
                $(".happening_pic a img").css("width","9.6rem");
            }
            // 附近商家
            var onOff=true;
            $(window).scroll(function(){
                event.preventDefault();
                var hh=$(document).height();
                var wh=$(window).height();
                var sc=$(document).scrollTop();
                var search_h=$(".search_outer").height();
                if(sc>=search_h){
                    $(".search").show();
                }else{
                    $(".search").hide();
                }
                if(sc>wh){
                    $("#totop").css("display","block");
                    $("#totop").click(function(){
                        $(document).scrollTop(0);
                    })
                }else{
                    $("#totop").css("display","none");
                }
                if((hh-wh-sc<=30)&&onOff){
                    onOff=false;
                    var el = document.getElementById('thelist');
                    var page = parseInt($("input[name='page']").val()) + 1;
                    var shopinfo_url = "/index.php/Mobile/Shop/shopinfo/shopid/";
                    $.ajax({
                        url : "/mobile/shop/list",
                        type: 'get',
                        data: {
                            page:page,
                            mylongitude:mylongitude,
                            mylatitude:mylatitude
                            },
                        dataType:'json',
                        success:function(result){
                            if (result.status == 'success') {
                                //console.log(result.data);
                                var lists = result.data.data;
                                for (i = 0; i < (result.data.to-result.data.from); i++) {
                                    var list = lists[i];
                                    li = document.createElement('li');
                                    li.innerHTML = '<a href="/mobile/shop/get?shopid='+list['shopid']+'"><img class="fl nearby_busypic" src="' + image_domain +list['logo'] +'" alt="">' +
                                                        '<div class="fr nearby_busytext">' +
                                                            '<div class="fz_44 oh">' +
                                                                '<h2 class="fl fz_44 busy_name">'+list['name']+'</h2>'+
                                                               // '<em class="fr nearby_score">'+list['commentmark']+'分</em>' +
                                                            '</div>' +
                                                            '<p class="fz_34 oh nearby_family"><span class="fl">'+list['secondclassname'] + list['label']+ '</span>' +
                                                            // '<span class="fr">'+list['ordernumber']+'笔消费</span></p>' +
                                                            '<p class="fz_28 oh nearby_address"><span class="fl">'+list['districtname']+list['businessareaname']+'</span>';
                                    if(list['distance'] != undefined) {
                                        li.innerHTML +=     '<span class="fr"><&nbsp;'+list['distance']+' km</span></p>';
                                    }
                                        li.innerHTML += '</div>' +
                                                    '</a>';
                                    el.appendChild(li, el.childNodes[0]);
                                }
                                $(".nearby_all li").addClass('nearby_cen oh')
                                $("input[name='page']").val(page);
                            }else{
                                $("#more").hide();
                            }
                        onOff=true;
                        }
                    });
                }
            })
            // for (var i = 0; i < $(".busy_name").length; i++) {//商家名称字数限定
            //     if($(".busy_name").eq(i).html().length>9){
            //         var nearby_busyhtml=$(".busy_name").eq(i).html().substring(0,8);
            //         // alert($(".busy_name").eq(i).html())
            //         $(".busy_name").eq(i).html(nearby_busyhtml+"...");
            //     }
            // };
        })

        var num=$(".banner_inner li").length;//baner图补充
        for (var i = 0; i < num-1; i++) {
            $(".banner_sign").append("<span></span>");
        };
        $(".banner_inner").width($(".banner_inner li").width()*(num+2))
    </script>
@endsection